<template>
  <div>
    <div class="supplier-search-header" v-if="supplierDetail.id && supplierDetail.id>0">
      <div class="left">

      </div>
      <div class="right">
      </div>
      <div class="c"></div>
    </div>

    <div class="supplier-search-input-box">
      搜索供应商名称:
      <el-input clearable style="display: inline-block; width: 1000px;" v-model.trim="searchKeywords" @keyup.native.enter="getSupplierList"/>
      <el-button style="margin-left: 10px;" type="primary" @click="getSupplierList">搜索</el-button>
    </div>
    <div class="supplier-search-product-result">
      <div v-if="supplierList.length===0" style="color: #888888; text-align: center;">暂无数据....</div>
      <supplier-box :is-list="true" :detail="item" v-for="(item,index) in supplierList" :key="index"/>
      <div class="c"></div>
    </div>
    <div class="block" style="text-align: left">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import SupplierBox from '../Common/SupplierBox'
import SupplierProductBoxList from '../Common/SupplierProductListBox'
import CartDialog from '../Dialog/CartDialog'
import MyButton from '../Common/MyButton'
export default {
  name: 'SupplierSearchPage',
  components: {MyButton, CartDialog, SupplierProductBoxList, SupplierBox},
  data:function () {
    return {
      searchKeywords:'',
      supplierDetail:{},
      supplierList:[],
      pageData:{
        page:1,
        pageSize:20,
        total:0,
      }
    }
  },
  watch:{
    $route:function () {
      this.init()
    }
  },
  mounted () {
    this.init()
  },
  methods:{
    init:function () {
      this.getSupplierList()
    },
    handleSizeChange:function (pageSize) {
      this.pageData.pageSize=pageSize
      this.pageData.page=1
      this.getSupplierList()
    },
    handleCurrentChange:function (page) {
      this.pageData.page=page
      this.getSupplierList()
    },
    // 获取供应商详情
    getSupplierDetail:function (supplier) {

    },
    // 搜索商品
    getSupplierList:function () {
      var form={}
      let $this=this
      form.name=this.searchKeywords
      form.page=$this.pageData.page
      form.pageSize=$this.pageData.pageSize
      $this.MyRequest(this.ApiDoNameShop+'Supplier/getList',form,function (data) {
        $this.supplierList=data.list
        $this.pageData.total=data.total
        $this.$forceUpdate()
      })
    }
  }
}
</script>

<style scoped>

</style>
